/*
 * @Author: Await
 * @Date: 2025-05-10 14:20:00
 * @LastEditors: Await
 * @LastEditTime: 2025-05-10 14:20:00
 * @Description: 热力图图表组件
 */

import React, { useEffect, useState } from 'react';
import { Alert } from 'antd';
import ChartBase from '../ChartBase/index';
import { ChartBaseProps } from '../ChartBase/types';
import { ChartType } from '../../../types/chartTypes';

interface HeatmapChartProps extends ChartBaseProps {
  showEmptyDataWarning?: boolean;
}

/**
 * 热力图组件
 * 注意：热力图必须使用visualMap配置，并且在直角坐标系中时必须有两个category类型的坐标轴
 */
const HeatmapChart: React.FC<HeatmapChartProps> = ({
  option,
  data,
  dataConfig,
  showEmptyDataWarning = true,
  ...restProps
}) => {
  const [isDataValid, setIsDataValid] = useState<boolean>(true);
  const [errorMsg, setErrorMsg] = useState<string>('');

  // 验证数据对热力图的有效性
  useEffect(() => {
    if (!data || data.length === 0) {
      setIsDataValid(false);
      setErrorMsg('热力图需要有效的数据');
      return;
    }

    // 其他验证逻辑可以在这里添加
    setIsDataValid(true);
    setErrorMsg('');
  }, [data]);

  // 准备热力图的默认配置
  const heatmapOption = {
    ...option,
    // 热力图类型
    type: ChartType.HEATMAP,
    // 可视化映射组件配置
    visualMap: {
      min: 0,
      max: 10,
      calculable: true,
      orient: 'horizontal' as const, // 使用const断言确保类型正确
      left: 'center',
      bottom: '5%',
      ...(option?.visualMap || {})
    },
    // 坐标轴配置
    xAxis: {
      type: 'category',
      data: [],
      ...(option?.xAxis || {})
    },
    yAxis: {
      type: 'category',
      data: [],
      ...(option?.yAxis || {})
    }
  };

  // 准备热力图的默认空数据
  const defaultHeatmapData = [
    { x: '', y: '', value: 0 }
  ];

  // 如果没有数据或数据无效，使用默认空数据
  const finalData = (!data || data.length === 0) ? defaultHeatmapData : data;

  // 如果没有数据映射配置，提供默认配置
  const finalDataConfig = dataConfig || {
    dimensions: [
      { field: 'x', name: 'X轴', xAxis: true },
      { field: 'y', name: 'Y轴' }
    ],
    measures: [
      { field: 'value', name: '值', primary: true }
    ]
  };

  return (
    <div className="heatmap-chart-container">
      {!isDataValid && showEmptyDataWarning && (
        <Alert
          message="数据警告"
          description={errorMsg || "热力图数据不完整或无效，将使用空数据进行渲染。"}
          type="warning"
          showIcon
          style={{ marginBottom: 16 }}
        />
      )}

      <ChartBase
        option={heatmapOption}
        data={finalData}
        dataConfig={finalDataConfig}
        {...restProps}
      />
    </div>
  );
};

export default HeatmapChart;